<!--
 * @Author: your name
 * @Date: 2021-05-26 12:28:22
 * @LastEditTime: 2021-06-09 18:07:49
 * @LastEditors: YaoXiaoTian
 * @Description: In User Settings Edit
 * @FilePath: \tourismpc\src\views\counsel\Counsel.vue
-->
<template>
  <div class="counsel">
    <Banner></Banner>
    <el-header>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        active-text-color="#CF975A"
        @select="handleSelect"
      >
        <el-menu-item index="1">游记攻略</el-menu-item>
        <el-menu-item index="2">度假活动</el-menu-item>
        <el-menu-item index="3">乡村资讯</el-menu-item>
        <el-menu-item index="4">政府资讯</el-menu-item>
      </el-menu>
    </el-header>
    <div>
      <div class="list" v-if="collectList && collectList.length">
        <Travel :collectList="collectList" />
      </div>
      <Empty v-else />
      <div class="footer" v-if="total">
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          background
          hide-on-single-page
          layout="prev, pager, next"
          page-size="12"
          :current-page="currentPage"
          @current-change="pageChange"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import Banner from "../../components/banner/index.vue";
import Travel from "./components/travel/index";
import Empty from "../../components/Empty.vue";
export default {
  data() {
    return {
      activeIndex: "1",
      sortIndex: "",
      collectList: [],
      tourTitle: this.$route.query.search,
      currentPage: 1,
      total: 0,
    };
  },
  components: {
    Banner,
    Travel,
    Empty,
  },
  watch: {
    $route: {
      handler() {
        this.tourTitle = this.$route.query.search;
        this.currentPage = 1;
        this.getData();
        //深度监听，同时也可监听到param参数变化
      },
      deep: true,
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    handleSelect(key) {
      this.activeIndex = key;
      this.currentPage = 1;
      this.getData();
    },
    getData() {
      let params = {
        page: this.currentPage,
        rows: 12,
        tourType: Number.parseInt(this.activeIndex),
      };
      if (this.tourTitle) {
        params.tourTitle = this.tourTitle;
      }
      this.$http
        .fetch(this.$apiPath.getTravelsPage, {
          params,
        })
        .then((res) => {
          if (res.code == 200) {
            this.collectList = res.data.records;
          }
        });
    },
    pageChange(val) {
      this.currentPage = val;
      this.getData();
    },
  },
};
</script>
<style lang="less">
.counsel {
  .list {
    width: 1225px;
    margin: 0 auto;
  }
  .sort {
    width: 1225px;
    height: 20px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .sortItem {
    display: inline-block;
    line-height: 20px;
    color: #666666;
    cursor: pointer;
    margin-right: 33px;
    i {
      font-size: 14px;
    }
  }
  .leftTip {
    display: inline-block;
    height: 20px;
    width: 4px;
    background-color: #cf975a;
    margin-right: 10px;
  }
  .footer {
    padding: 0;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 33px;
    background-color: #ffffff;
    .btn-prev {
      width: 74px;
      height: 30px;
      border: 1px solid #c7c7c7;
      border-radius: 15px;
    }
    .btn-next {
      width: 74px;
      height: 30px;
      border: 1px solid #c7c7c7;
      border-radius: 15px;
      color: #999999;
    }
    .el-pager li {
      width: 30px;
      height: 30px;
      border: 1px solid #c7c7c7;
      border-radius: 15px;
      color: #999999;
    }
    .el-pager {
      .number {
        text-align: center;
        padding: 0;
      }
      //   .number:hover {
      //     color: #999999 !important;
      //   }
      li:not(.active).number:hover {
        color: #999999 !important;
      }
    }
    .el-pager li:not(.disabled).active {
      background-color: #cf975a;
    }
  }
}
</style>
